<template>
  <div class="title-sty-tab">
    <div :class="{'left':active === 0}" class="tab-item" @click="tabTab(0)">
      <img v-if="active === 0" :src="left" alt="">
      <img v-else :src="left_none" alt="">
    </div>
    <div :class="{'center':active === 1}" class="tab-item" style="margin: 0 8px" @click="tabTab(1)">
      <img v-if="active === 1" :src="center" alt="">
      <img v-else :src="center_none" alt="">
    </div>
    <div :class="{'right':active === 2}" class="tab-item" @click="tabTab(2)">
      <img v-if="active === 2" :src="right" alt="">
      <img v-else :src="right_none" alt="">
    </div>
  </div>
</template>
<script>
import left from '@/assets/reportManage/left.png';
import left_none from '@/assets/reportManage/left-none.png';
import right from '@/assets/reportManage/right.png';
import right_none from '@/assets/reportManage/right-none.png';
import center from '@/assets/reportManage/center.png';
import center_none from '@/assets/reportManage/center-none.png';
export default {
  props: {
    active: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      left, left_none, right, right_none, center, center_none
    };
  },
  methods: {
    tabTab(item) {
      this.$emit('tabTab', item);
    }
  }
};
</script>
<style lang="scss" scoped>
.title-sty-tab {
  display: flex;
  align-items: center;
  height: 30px;
  .tab-item {
    cursor: pointer;
    width: 16px;
    height: 16px;
    img {
      width: 100%;
    }
  }
}
</style>
